<template>
   <div class="mypays">
       <h1 class="top_line">在线支付</h1>
       <div class="big_pay">
            <div class="moretime">
                <span >支付剩余时间</span>
                <p>   
                    <a >00</a>
                    :<a >18</a>:
                    <a >06</a>
                </p>
            </div>
            <div class="gods_infos">
                <p>深圳市宝安区南山大道是否会东四环覅发的是符合熢</p>
                <div class="right_info">
                     <span class="info_sz">详情</span>
                    <a class="footer_pays">￥<span>{{footerpaymoney}}</span></a>
                </div>
            </div>
       </div>
       <p class="gray_qita">
           其他支付
       </p>
       <ul class="weixinpay">
           <li v-for='(itemsimg,index) in imgpay' :key="index">
               <div class="right_flex_zhifu">
                      <img class="fist_zifu" :src="itemsimg.src" alt="">
                       <span>{{itemsimg.name}}</span>
               </div>
               <img class="fist_zifu_right"  :src="imgright[0]"  alt="">
           </li>
       </ul>
       <div class="btn">
           <p>确认支付￥<span>{{footerpaymoney}}</span></p>
       </div>
   </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      footerpaymoney:'',
      imgright:["../../static/images/right.jpg","../../static/images/grayright.png"],
      imgpay:[
          {"name":'支付宝',"src":"../../static/images/zhifubao.png"},
           {"name":'微信',"src":"../../static/images/weixin.png"}
      ]
    }
  },
  created(){
      this.footerpaymoney=this.$route.params.mylaoutpay
  }
}
</script>
<style scoped >
.mypays{
    height:100%;
    width:100%;
}
.top_line{
    font-size:20px;
    background: #3091e9;
    color: #fff;
    text-align:center;
    line-height: 60px;
    height: 60px;
}
.big_pay{
    padding:0 20px;
}
.moretime{
    text-align:center;
    border-bottom:1px solid #f3f3f3;
}
.moretime span{
    font-size:16px;
    color: #b6b6b6;
    display:inline-block;
    padding:40px 0 15px 0;
}
.moretime p{
    font-size:28px;
    color: #383838;
    padding-bottom:30px;
}
.gods_infos{
    display:flex;
    height: 64px;
    justify-content: space-between;
    align-items: center;
}
.gods_infos p{
    width:184px;
    font-size:20px;
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis; 
}
.footer_pays{
    font-size:20px;
    font-size:16px;
    color: #ff843b;
}
.info_sz{
    font-size:20px;
    color: #c3c3c3;
}
.right_info{
    display:flex;
    justify-content: space-between;
    width:40%;
}
.gray_qita{
    display:flex;
    align-items:center;
   justify-content: center;
    height:46px;
    font-size:16px;
    color: #ababab;
    background: #f5f5f5;
    width:100%;
}
.weixinpay{
    padding:0 20px;
    border-bottom:1px solid #f3f3f3;
}
.weixinpay li{
    justify-content:space-between;
    height:77px;
    display:flex;
    align-items:center;
}
.weixinpay li:nth-of-type(1){
    border-bottom:1px solid #f3f3f3;
}
.fist_zifu{
    width:44px;
    height:40px;
}
.fist_zifu_right{
    width: 26px;
    height: 26px;
}
.right_flex_zhifu{
    display:flex;
    align-items:center;
}
.right_flex_zhifu span{
    margin-left:25px;
}
.btn{
    line-height: 50px;
    border-radius:8px;
    text-align:center;
    font-size:20px;
    color: #fff;
    font-weight:bold;
    background: #4cd964;
    width:90%;
    height:50px;
    margin:18px auto 0;
}
</style>
